<div class="signin-container" fxLayout="row">
  <div class="signin-cover" fxFlex="100" fxFlex.gt-xs="50">
    <div fxLayout="column" fxLayoutAlign="center center" style="height: 100%;">
      <img src="assets/images/signup.svg" alt="">
    </div>
  </div>
  <div class="signin-content mat-elevation-z12" fxFlex="100" fxFlex.gt-xs="50">
    <mat-card-title>注册账号
      <a class="redirect" [routerLink]="['/sigin']">用户登录</a>
    </mat-card-title>

    <form [formGroup]="userForm" (ngSubmit)="register()">
      <mat-form-field class="display-block">
        <input type="email" placeholder="请输入您的邮箱" formControlName="email" required matInput>
        <mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请输入您的密码" formControlName="password" required matInput>
        <mat-error *ngIf="formErrors.password">{{formErrors.password}}</mat-error>
      </mat-form-field>

      <mat-form-field class="display-block">
        <input type="password" placeholder="请重复输入您的密码" formControlName="passwordConfirm" required matInput>
        <mat-error *ngIf="formErrors.passwordConfirm">{{formErrors.passwordConfirm}}</mat-error>
      </mat-form-field>

      <mat-checkbox class="display-block form-check">我同意<a href="javascript:;">注册协议</a></mat-checkbox>
      
      <button color="primary" mat-raised-button [disabled]="!userForm.valid">创建账户</button>
      <mat-error *ngIf="formErrors.signUpFailure">{{formErrors.signUpFailure}}</mat-error>
    </form>

    <div class="other-sign">
      我要登陆
    </div>

    <button class="mat-raised-button capsule-button google-button m-b-15" (click)="signInWithGoogle()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/google-plus.svg">
        </div>
        <span class="capsule-button-text">Google 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button github-button m-b-15" (click)="signInWithGithub()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/github-logo.svg">
        </div>
        <span class="capsule-button-text">Github 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button facebook-button m-b-15">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/facebook.svg">
        </div>
        <span class="capsule-button-text">Facebook 账号登录</span>
      </span>
    </button>

    <button class="mat-raised-button capsule-button any-button" (click)="signInAnonymously()">
      <span class="capsule-button-wrapper">
        <div class="capsule-button-icon">
          <img src="assets/icon/firebase.svg">
        </div>
        <span class="capsule-button-text">游客 账号登录</span>
      </span>
    </button>

  </div>
</div>